<div
  data-bind="modal: isShow"
  class="modal fade"
  data-backdrop="static"
  data-keyboard="false"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-bind="click: reset">
          <i class="fa fa-close"></i>
        </button>
        <h4
          class="modal-title"
          data-bind="text: Kooboo.text.common.TableRelation"
        ></h4>
      </div>
      <div class="modal-body">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-3 control-label" data-bind="text: Kooboo.text.common.name"></label>
            <div class="col-md-9">
              <input
                type="text"
                class="form-control"
                data-bind="value: name, textError: name"
              />
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label" data-bind="text: Kooboo.text.component.tableRelation.tableA"></label>
            <div class="col-md-9">
              <select
                class="form-control"
                data-bind="options: tables, optionsText: 'name', optionsValue: 'name', value: mainTable, textError: mainTable"
              ></select>
            </div>
          </div>
          <div class="form-group" data-bind="visible: mainTable">
            <label class="col-md-3 control-label" data-bind="text:Kooboo.text.component.tableRelation.fieldA"></label>
            <div class="col-md-9">
              <select
                class="form-control"
                data-bind="options: mainTableFields, optionsText: 'name', optionsValue: 'name', value: mainTableField, textError: mainTableField"
              ></select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label" data-bind="text: Kooboo.text.common.Relation"></label>
            <div class="col-md-9">
              <select
                class="form-control"
                data-bind="options: relationTypes, optionsText: 'displayName', optionsValue: 'type', value: relationType, textError: relationType"
              ></select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label" data-bind="text: Kooboo.text.component.tableRelation.tableB"></label>
            <div class="col-md-9">
              <select
                class="form-control"
                data-bind="options: tables, optionsText: 'name', optionsValue: 'name', value: subTable, textError: subTable"
              ></select>
            </div>
          </div>
          <div class="form-group" data-bind="visible: subTable">
            <label class="col-md-3 control-label" data-bind="text: Kooboo.text.component.tableRelation.fieldB"></label>
            <div class="col-md-9">
              <select
                class="form-control"
                data-bind="options: subTableFields, optionsText: 'name', optionsValue: 'name', value: subTableField, textError: subTableField"
              ></select>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button
          class="btn blue"
          data-bind="click: onSave, text: Kooboo.text.common.save"
        ></button>
        <button
          class="btn gray"
          data-bind="click: reset, text: Kooboo.text.common.cancel"
        ></button>
      </div>
    </div>
  </div>
</div>
